<template>
  <div :style="{ width: props.width, height: props.height }">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      :width="props.width"
      :height="props.height"
      viewBox="0 0 326 31"
      preserveAspectRatio="none meet"
    >
      <defs>
        <linearGradient
          id="linear-gradient"
          x1="1.287"
          y1="0.86"
          x2="0.177"
          y2="0.258"
          gradientUnits="objectBoundingBox"
        >
          <stop offset="0" :stop-color="states.color" />
          <stop
            offset="0.382"
            :stop-color="states.color"
            stop-opacity="0.859"
          />
          <stop offset="1" :stop-color="states.color" stop-opacity="0" />
        </linearGradient>
      </defs>
      <g id="文字装饰4" transform="translate(-773 -208)">
        <path
          id="路径_1177"
          data-name="路径 1177"
          d="M4,0H44L32,24H-8Z"
          transform="translate(781 208)"
          :fill="states.color"
          fill-opacity="0.2"
        />
        <path
          id="路径_1178"
          data-name="路径 1178"
          d="M4,0H44L32,24H-8Z"
          transform="translate(792 208)"
          :fill="states.color"
          fill-opacity="0.5"
        />
        <path
          id="路径_1189"
          data-name="路径 1189"
          d="M4,0H44L32,24H-8Z"
          transform="translate(802 208)"
          :fill="states.color"
          fill-opacity="0.7"
        />
        <rect
          id="矩形_42"
          data-name="矩形 42"
          width="320"
          height="2"
          transform="translate(779 237)"
          :fill="states.color"
        />
      </g>
      <text
        :x="states.x"
        :y="states.y"
        font-family="font"
        :font-size="states.fontSize"
        :fill="states.fontColor"
        style="text-anchor: middle"
      >
        {{ states.text }}
      </text>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;

onMounted(() => {
  // states.value.color = "#4169E1";
  // states.value.color2 = "#4169E1";
  states.value.x = "33%";
  states.value.y = "59%";
});
</script>

<style scoped lang="scss"></style>
